<template>
  <div id="box">
    <div class="popup">
      <div>
        <div class="theHead">
          <span class="theTitle">选择区间</span>
          <x-icon @click="closeX" type="ios-close-empty" size="30"></x-icon>
        </div>
        <div class="theDateCon">
          <input class="dateSty" v-model="startDateShow" @input="changeValue(1)" number/>
          至
          <input class="dateSty" v-model="endDateShow" @input="changeValue(2)" number/>
        </div>
        <div @click="affirm" class="sureBtn">确认</div>
      </div>
    </div>
    <van-popup v-model="dataChooseFlag" position="bottom">
      <van-picker
        :columns="columns"
        @change="onChange"
        show-toolbar
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    startDate: {},
    endDate: {}
  },

  data () {
    return {
      dataChooseFlag: false,
      // 时间选择框选择的值（1为开始时间，2为结束时间）
      dateIndex: 1,
      // 时间选择值
      currentDate: '',
      startDateShow: '',
      endDateShow: '',
      sdhm: '',
      edhm: '',
      begintime3: '',
      begintime4: '',
      show: false,
      columns: [],
      flag: false,
      show1: false
    }
  },
  mounted () {
    const numList = []
    for (let i = 1; i < 296; i++) {
      numList.push(i)
    }
    this.columns = numList
    this.startDateShow = this.startDate
    this.endDateShow = this.endDate
  },
  methods: {
    changeValue (flag) {},
    onConfirm (event) {
      // console.log('confirm', event)
      if (this.flag === 1) {
        if (event > 276) {
          this.$alertShow('不能大于276')
          return
        }
        this.startDateShow = event
        this.endDateShow = event + 19
      } else {
        if (event <= 20) {
          this.$alertShow('不能小于20')
          return
        }
        this.endDateShow = event
        this.startDateShow = event - 19
      }
      this.dataChooseFlag = false
    },
    onCancel () {
      this.dataChooseFlag = false
      // console.log('取消')
    },
    onChange (event) {
      // console.log('change', event)
    },
    // 打开时间选择框
    getDate (flag) {
      this.flag = flag
      this.dataChooseFlag = true
    },
    closeX () {
      this.$emit('closeX', false)
    },
    // 时间选择确认按钮
    affirm () {
      if (!this.startDateShow || this.startDateShow > 295 || this.startDateShow <= 0) {
        this.$alertShow('数字范围为1-295')
        return
      }
      if (!this.startDateShow || this.endDateShow <= 0 || this.endDateShow > 295) {
        this.$alertShow('数字范围为1-295')
        return
      }
      if (isNaN(this.startDateShow) || isNaN(this.endDateShow)) {
        this.$alertShow('请输入正确的数字')
        return
      }
      if (parseInt(this.startDateShow) !== parseFloat(this.startDateShow) || parseInt(this.endDateShow) !== parseFloat(this.endDateShow)) {
        this.$alertShow('请输入整数')
        return
      }
      if (Number(this.startDateShow) > Number(this.endDateShow)) {
        this.$alertShow('开始序号必须小于等于结束序号')
        return
      }
      this.$store.commit('SETSELECTRANGE', {start: Number(this.startDateShow), end: Number(this.endDateShow)})
      this.$emit('getDateObj', {
        startDate: Number(this.startDateShow),
        endDate: Number(this.endDateShow),
        show: this.show
      })
    }
  }
}
</script>
<style scoped lang='less'>
#box {
  font-size: 0.28rem;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #333333;
  font-weight: 400;
  .theHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;
    .theTitle {
      color: #565656;
      font-size: 0.28rem;
      padding: 0.2rem;
    }
  }
  .theDateCon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0.3rem;
    .dateSty {
      width: 2.5rem;
      padding: 0.15rem 0;
      background-color: #f3f3f3;
      text-align: center;
      border-radius: 0.08rem;
    }
  }
  .sureBtn {
    width: 95%;
    text-align: center;
    color: #ffffff;
    background: #4570a9;
    margin: 0.6rem auto;
    padding: 0.15rem 0;
    border-radius: 0.08rem;
  }
}
</style>
